<template>
    <div>
      <ItemMusicTop :playlist="state.playList"/>  
      <ItemMusicList :itemList="state.itemList" :subscribedCount="state.playList.subscribedCount"/>
    </div>
    
</template>
<script>
import { useRoute } from 'vue-router';
import { onMounted, reactive } from 'vue';
import { getMusicItemList,getItemList} from '@/request/api/item'
import ItemMusicTop from '@/components/item/ItemMusicTop.vue';
import ItemMusicList from '@/components/item/ItemMusicList.vue';
export default{
    components:{
        ItemMusicTop,
        ItemMusicList,
    },
    setup(){
        const state=reactive({
            playList:{},//歌单详情页数据
            itemList:[]//歌单的歌曲
        });
        onMounted(async ()=>{
            let id=useRoute().query.id;
            // console.log(id);
            //获取歌单详情
            let res=await getMusicItemList(id);
            // console.log(res);
            state.playList=res.data.playlist;
            //获取歌单歌曲
            let result=await getItemList(id);
            // console.log(result);
            state.itemList=result.data.songs;
            // console.log(state.itemList)
            //防止页面刷新，数据丢失，将数据保存在sessionStorage中
            sessionStorage.setItem('itemDetail',JSON.stringify(state))
        });
        return {state}
    }
}
</script>